<!--
 * @Author: 梁青春
 * @Date: 2022-04-24 10:21:45
 * @LastEditTime: 2022-04-24 18:03:06
 * @LastEditors: 梁青春
-->
<template>
    <div 
        v-loading.fullscreen.lock="loading"
        element-loading-text="拼命加载中"
    >
        <el-container v-if="!loading">
            <el-header>
            <main-navbar/>
            </el-header>
            <el-container>
                <el-aside :width="asideWidth">
                    <main-sidebar/>
                </el-aside>
                <el-main>
                    <hello-world></hello-world>
                </el-main>
            </el-container>
        </el-container>    
    </div>
</template>

<script setup lang="ts">
    import { ref, computed } from "vue";
    import mainNavbar from "./main-navbar.vue"
    import mainSidebar from "./main-sidebar.vue"
    import { useStore } from 'vuex'
    const store = useStore()

    const loading = ref(false)
    const asideWidth = computed(() => {
        return store.state.isCollapse? .8+'rem' : 2.6 +'rem' 
    })

</script>